<template>
	<!-- 高德地图组件 -->
	<view class="gdMap-main">
		<view class="gdMap-header">地址选择</view>

		<view class="section">
			<input placeholder="请输入搜索位置" v-model="searchValue" type="text" />
			<view @click="bindInput" class="searchName">搜索</view>

			<view class="text_box" v-if="isTips">
				<view class="text_box_item" v-for="item in tips" :key="item.id" @click="changeAddress(item)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="gdMap-content">
			<view class="map_container">
				<!-- 
				longitude:经度 
				latitude:纬度 
				markers:标记点 
				scale:缩放级别，取值范围为3-20 
				show-location:显示带有方向的当前定位点
				-->
				<map
					class="map"
					id="map"
					:longitude="longitude"
					:latitude="latitude"
					scale="14"
					bindmarkertap="makertap"
					show-location="true"
					:enable-3D="true"
					:markers="markers"
				></map>
			</view>
			<view class="map_text">
				<text class="h1">{{ textData.name }}</text>
				<text>{{ textData.desc }}</text>
			</view>
		</view>
		<view class="gdMap-btn">
			<view class="btn" @click="closeMap">关闭</view>
			<view class="btn active" @click="subMap">确认</view>
		</view>
	</view>
</template>

<script>
import amapFile from '../../utils/amap-wx.130.js';
export default {
	name: 'hwxcGdMap',
	data() {
		return {
			markers: [],
			latitude: null,
			longitude: null,
			textData: {},
			markersData: [],
			amapFileInfo: null,
			tips: [],
			searchValue: '',
			isTips: false,
			poisData:[]
		};
	},
	mounted() {
		this.getPoiData();
	},
	props:{
		cityName:{
			type:String,
			default:""
		}
	},
	methods: {
		getPoiData() {
			var that = this;
			var myAmapFun = new amapFile.AMapWX({ key: '858bf93b69c073e6d292c9f328ad0c80' });
			that.amapFileInfo = myAmapFun;
			myAmapFun.getPoiAround({
				iconPathSelected: '../../static/image/dw_active.png',
				iconPath: '../../static/image/dw_active.png',
				success: function (data) {
					that.markersData = data.markers;
					that.poisData = data.poisData;
					that.markers = that.markersData[0];
					that.latitude = that.markersData[0].latitude;
					that.longitude = that.markersData[0].longitude;
					that.showMarkerInfo(that.markersData, 0);
				},
				fail: function (info) {
					// uni.showModal({ title: '温馨提示', content: '地址信息获取失败，请先授权~' });
				}
			});
		},

		makertap(e) {
			var id = e.markerId;
			var that = this;
			that.showMarkerInfo(that.markersData, id);
			that.changeMarkerColor(that.markersData, id);
		},

		// 当前地址信息
		showMarkerInfo(data, i) {
			var that = this;
			that.textData = {
				name: data[i].name,
				desc: data[i].address
			};
		},

		// 地址标记
		changeMarkerColor(data, i) {
			var that = this;
			var markers = [];
			for (var j = 0; j < data.length; j++) {
				if (j == i) {
					data[j].iconPath = '../../static/image/dw_active.png';
				} else {
					data[j].iconPath = '../../static/image/dw.png';
				}
				markers.push(data[j]);
			}
			that.markers = markers;
		},

		// 搜索地址
		bindInput() {
			var that = this;
			var searchVal = that.searchValue;
			var myAmapFun = new amapFile.AMapWX({ key: '858bf93b69c073e6d292c9f328ad0c80' });
			myAmapFun.getInputtips({
				keywords: searchVal,
				citylimit: true,
				city: this.cityName,
				success: function (data) {
					if (data && data.tips) {
						that.isTips = true;
						that.tips = data.tips;
					}
				}
			});
		},

		// 切换地址
		changeAddress(val) {
			this.isTips = false;
			this.searchValue = '';
			this.tips = [];
			this.markersData = [{...val}];
			this.textData = {
				name: val.name,
				desc: val.address
			}
		},

		subMap() {
			this.$emit('subMap', this.markersData[0]);
		},

		closeMap() {
			this.$emit('closeMap');
		}
	}
};
</script>

<style scoped>
.gdMap-main {
}
.gdMap-content {
	position: relative;
	height: 50vh;
}
.gdMap-header {
	height: 90rpx;
	line-height: 80rpx;
	font-size: 32rpx;
	text-align: center;
	color: #444;
	font-weight: bold;
}
.map_container {
	position: absolute;
	top: 0;
	bottom: 80px;
	left: 0;
	right: 0;
}
.map {
	width: 100%;
	height: 100%;
}
.map_text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0px;
	height: 80px;
	background: #fff;
	padding: 0 15px;
}
text {
	margin: 5px 0;
	display: block;
	font-size: 12px;
}
.h1 {
	margin: 15px 0;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: bold;
}

.gdMap-btn {
	box-sizing: border-box;
	padding: 0px 20rpx;
	padding-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.btn {
	flex: 1;
	background-color: #f3f3f3;
	color: #444;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 10rpx;
}

.active {
	background-color: #2979ff;
	color: #fff;
}
</style>

<style>
.section {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	box-sizing: border-box;
	padding: 20rpx;
	position: relative;
}
.section input {
	flex: 1;
	border: 1px solid #c3c3c3;
	height: 70rpx;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 0px 20rpx;
}

.searchName {
	width: 80rpx;
	text-align: right;
}

.text_box {
	position: absolute;
	top: 95rpx;
	left: 20rpx;
	width: calc(100% - 120rpx);
	background-color: #fff;
	border: 1px #c3c3c3 solid;
	box-sizing: border-box;
	padding: 0px 20rpx;
	z-index: 999;
	height: 400rpx;
	overflow-y: scroll;
}

.text_box_item {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 26rpx;
}
</style>
